<div class="list-teams-progress">
  <md-progress-linear md-mode="indeterminate" ng-show="listTeamsController.isLoading"></md-progress-linear>
</div>
<md-content flex class="list-teams-content">
  <div class="list-teams">
    <che-list-header ng-if="listTeamsController.teams.length > 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row" ng-if="!listTeamsController.readonly"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="team list"
                         ng-checked="listTeamsController.isBulkChecked"
                         ng-click="listTeamsController.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="30"
                                  che-sort-value='listTeamsController.teamOrderBy'
                                  che-sort-item='name'
                                  che-column-title='Name'></che-list-header-column>
          <che-list-header-column flex-gt-xs="25"
                                  che-column-title='Members'></che-list-header-column>
          <che-list-header-column flex-gt-xs="25"
                                  che-column-title='RAM CAP'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Actions'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list ng-show="listTeamsController.teams">
      <team-item ng-repeat="team in listTeamsController.teams"
                 team="team"
                 members="listTeamsController.getMembersCount(team.id)"
                 ram-cap="listTeamsController.getRamCap(team.id)"
                 cdvy-is-selectable="!listTeamsController.readonly"
                 ng-model="listTeamsController.teamsSelectedStatus[team.id]"
                 on-update="listTeamsController.fetchTeams()"
                 cdvy-on-checkbox-click="listTeamsController.updateSelectedStatus()">
      </team-item>
    </che-list>
  </div>
  <!-- Buttons -->
  <div layout="row" flex ng-if="!listTeamsController.readonly">
    <div flex>
      <che-button-default class="che-list-add-button"
                          che-button-title="Create Team" name="createTeamButton"
                          ng-click="listTeamsController.createNewTeam()"></che-button-default>
    </div>
    <div ng-if="listTeamsController.teams.length > 0">
      <che-button-primary-flat ng-disabled="listTeamsController.isNoSelected"
                               che-button-title="Delete" name="deleteButton"
                               ng-click="listTeamsController.removeTeams()"></che-button-primary-flat>
    </div>
  </div>
</md-content>
